<!--  -->
<template>
  <div class="container">
    <van-nav-bar title="首页" @click-left="() => {}" :fixed="true" left-arrow />

    <div class="dept">
      <p>请选择营业部</p>
      <van-icon name="arrow" size="20px" />
    </div>

    <div class="tab">
      <span
        :class="index == 0 ? ' tabBorder-select' : 'tabBorder'"
        @click="clickTab(0)"
        >未装车</span
      >
      <span
        :class="index == 1 ? 'tabBorder-select' : 'tabBorder'"
        @click="clickTab(1)"
        >已装车</span
      >
      <p style="flex: 1"></p>
      <span style="color: #333">查看货位</span>
      <van-icon name="arrow" size="20px" />
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      index: 0,
    };
  },

  computed: {},

  mounted() {
    // 接收数据
    this.$eventBus.$on('send', (e) => {
      console.log(e);
      this.$eventBus.$off('send');
    });
  },

  methods: {
    clickTab(index) {
      this.index = index;
    },
  },
};
</script>
<style lang='less' scoped>
.container > .dept {
  display: flex;
  flex-direction: row;
  background: white;
  padding: 10px;
  margin-bottom: 10px;

  & > p {
    font-family: PingFangSC-Medium;
    font-size: 15px;
    color: #333333;
    letter-spacing: 0;
    flex: 1;
    font-weight: bold;
    align-self: center;
  }
}

.container > .tab {
  display: flex;
  align-items: center;
  padding: 10px;
  background: white;
  & > span {
    font-family: PingFangSC-Medium;
    font-size: 15px;
    color: #999999;
    margin-left: 43px;
    letter-spacing: 0;
    font-weight: bold;
  }
}

.tabBorder-select {
  border-bottom: 3px solid blue;
  color: blue !important;
  padding-bottom: 5px;
}
.tabBorder {
  border-bottom: 3px solid white;
  padding-bottom: 5px;
}
</style>